<template>
	<view class="phone">
		<view class="content">
			<view class="title">修改手机号</view>
			<view class="tips">输入需要绑定的新手机号，验证通过后即可使用新的手机号码登陆</view>
			<view class="inpuWrap">
				<view class="inputPhone">
					<view class="areaCode">
						<span>+86</span>
						<view class="phoneIcon"></view>
					</view>
					<input v-model="datas.mobile" type="number" maxlength="11" placeholder="请输入手机号" placeholder-style="color:#CACCCC" :focus="true" />
				</view>
				<view class="code inputPhone">
					<input v-model="datas.code" type="number" placeholder="请输入验证码" placeholder-style="color:#CACCCC" />
					<button @click="getCode" :disabled="isCountingDown" :class="{disabledColor:isCountingDown}">{{buttonText}}</button>
				</view>
			</view>
		</view>
		<view class="btn" :class="{activeBtn:datas.mobile != '' && datas.code != ''}" @click="sureEdit">确认修改</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive,ref  } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import api from '@/api'
	import { useUserStoreToRefs } from '@/store/useUserStore'
	const { userInfo } = useUserStoreToRefs()
	onLoad(() => {
		
	})
	
	let countdown = ref(0);
	const isCountingDown = ref(false);
	const buttonText = ref('获取验证码');
	const datas = reactive<{
		mobile: string 
		code: string 
	}>({
		mobile:'',
		code:''
	})
	
	const codeApi = async() => {
		const res : any = await api({
			method: 'get',
			url: `/mobile/code?mobile=${datas.mobile}&type=phone&countryCode=86`,
		})
	}
	
	const getCode = () => {
		if (!parseInt(datas.mobile)) {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			});
			return false
		}
		let mobileReg = /^1[3456789]\d{9}$/
		if (!mobileReg.test(datas.mobile)) {
			uni.showToast({
				title: '手机号码有误',
				icon: 'none'
			});
			return false
		}
		codeApi()
		countdown.value = 60;
		isCountingDown.value = true;
		const timer = setInterval(() => {
			countdown.value--;
			if (countdown.value <= 0) {
			  clearInterval(timer);
			  isCountingDown.value = false;
			  buttonText.value = '获取验证码';
			} else {
			  buttonText.value = `${countdown.value}秒 后重新获取`;
			}
		}, 1000)
	}
	
	const sureEdit = async () => {
		if(datas.mobile == '' || datas.code == '') return false
		const res : any = await api({
			method: 'put',
			url: `/mall/user/mobile/${userInfo.value.phone}/86/${datas.mobile}/${datas.code}`,
		})
		if (res.code !== 0) {
			uni.showToast({
				icon: 'none',
				mask: true,
				title: res.msg
			})
			return false
		}else{
			uni.showToast({
				icon: 'none',
				mask: true,
				title: '修改成功'
			})
			setTimeout(() => {
				uni.navigateBack()
			},1000)
		}
	}
</script>

<style lang="scss" scoped>
.phone{
	height: 100vh;
	background-color: #F9F6F6;
	padding: 88rpx 40rpx 0;
	box-sizing: border-box;
	.content{
		.title{
			font-weight: bold;
			color: #1B2120;
			font-size: 48rpx;
		}
		.tips{
			color: #7C807F;
			font-size: 30rpx;
			line-height: 36rpx;
			margin: 24rpx 0 96rpx;
		}
		.inpuWrap{
			font-size: 32rpx;
			.inputPhone{
				padding: 0 32rpx;
				box-sizing: border-box;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				display: flex;
				align-items: center;
				height: 128rpx;
				background-color: #fff;
				.areaCode{
					display: flex;
					align-items: center;
					margin-right: 32rpx;
					color: #1B2120;
					.phoneIcon{
						width: 0;
						height: 0;
						border-top: 8rpx solid #1B2120; 
						border-right: 8rpx solid transparent;
						border-left: 8rpx solid transparent;
						border-bottom: 8rpx solid transparent;
						margin: 12rpx 0 0 6rpx;
					}
				}
			}
			.code{
				justify-content: space-between;
				margin-top: 24rpx;
				input{
					width: 300rpx !important;
				}
				button{
					padding: 0;
					margin: 0;
					border: none;
					border-radius: 0;
					/* #ifdef MP-TOUTIAO */
					line-height: 0;
					/* #endif */
					background-color: #fff;
					font-size: 32rpx;
					color: #FF6084;
					&::after{
						border: none;
					}
				}
			}
		}
	}
	.btn{
		background: linear-gradient( 90deg, #FFA6BC 0%, #FFA3A3 100%);
		border-radius: 62rpx 62rpx 62rpx 62rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 28rpx;
		color: #fff;
		letter-spacing: 2rpx;
		margin-top: 24rpx;
	}
	.activeBtn{
		background: linear-gradient( 90deg, #FF6188 0%, #FF5252 100%);
	}
	.disabledColor{
		color: #7C807F !important;
	}
}	
</style>